Lets test this locally first.
Lets say you manage the chat flow / bot at port 3000
![[Pasted image 20250517023729.png]]
The inject script will come from this same port:
```
```
The sdk to inject into a div is initiated with this:
```
```
Notice there's a `#chat-anchor`. That adds the button that opens chat:
![[Pasted image 20250517023928.png]]
If you hadn't included a target, it would just attach to document.body:
```
```
However, it won't matter. The button CSS actually position it fixed to the bottom right.
Make sure this script is ran AFTER body is done loading most elements, therefore you should place this script near end of body tag.
The next fundamental is the botID. You can find this at
- Firstly, by pressing Config button on your bot, to reach its Config page:
![[Pasted image 20250517024251.png]]
- Then at Config page, you'll see the bot id:
![[Pasted image 20250517024306.png]]
And there's a final check. Make sure the host and port number points to where you manage the bot with the dashboard. The host and port are at the script tag that sources inject.js, and at the sdk code that injects into your HTML.
----
The boilerplate is:
```
Test
```
Just open the page in a http server on local server (like MAMP)
---
Once satisfied, you may want to move to trying this on a production server. Note you should run this behind a reverse proxy with https, so that web browsers will allow your chatbot through.
Weng's eyes only: ChatGPT for more advanced embed use cases [https://chatgpt.com/c/68285234-de90-800f-b2a6-28aaa8d48a36](https://chatgpt.com/c/68285234-de90-800f-b2a6-28aaa8d48a36)